<button id="open-wizard" class="btn btn-blue">Open wizard</button>

<div class="wizard" id="wizard-demo">
<h1>Create Server</h1>

<div class="wizard-card" data-onValidated="setServerName" data-cardname="name">
  <h3>Name &amp; FQDN</h3>

  <div class="wizard-input-section">
    <p>
      To begin, please enter the IP of your server or the
      fully-qualified name.
    </p>

    <div class="control-group">
      <input id="new-server-fqdn" type="text"
             placeholder="FQDN or IP" data-validate="fqdn_or_ip" />
    </div>
  </div>

  <div class="wizard-input-section">
    <p>
      Optionally, give this server a label.  This will appear
      in the server nagivation.
    </p>

    <div class="control-group">
      <input id ="new-server-name" type="text"
             placeholder="Server name (optional)" data-validate="" />
    </div>
  </div>
</div>


<div class="wizard-card" data-cardname="group">
  <h3>Server Group</h3>

  <div class="wizard-input-section">
    <p>
      Where would you like server <strong class="create-server-name"></strong>
      to go?
    </p>

    <%= image_tag "groups.png", class: "wizard-group-list" %>
  </div>
</div>


<div class="wizard-card" data-cardname="services">
  <h3>Service Selection</h3>

  <div class="alert hide">
    It's recommended that you select at least one
    service, like ping.
  </div>

  <div class="wizard-input-section">
    <p>
      Please choose the services you'd like Panopta to
      monitor.  Any service you select will be given a default
      check frequency of 1 minute.
    </p>

    <select data-placeholder="Service List" style="width:350px;"
            class="chzn-select create-server-service-list" multiple>

      <option value=""></option>
      <optgroup label="Basic">
        <option selected value="icmp.ping">Ping</option>
        <option selected value="tcp.ssh">SSH</option>
        <option value="tcp.ftp">FTP</option>
      </optgroup>
      <optgroup label="Web">
        <option selected value="tcp.http">HTTP</option>
        <option value="tcp.https">HTTP (Secure)</option>
        <option value="tcp.dns">DNS</option>
      </optgroup>
      <optgroup label="Email">
        <option value="tcp.pop">POP</option>
        <option value="tcp.imap">IMAP</option>
        <option value="tcp.smtp">SMTP</option>
        <option value="tcp.pops">POP (Secure)</option>
        <option value="tcp.imaps">IMAP (Secure)</option>
        <option value="tcp.smtps">SMTP (Secure)</option>
        <option value="tcp.http.exchange">Microsoft Exchange</option>
      </optgroup>
      <optgroup label="Databases">
        <option value="tcp.mysql">MySQL</option>
        <option value="tcp.postgres">PostgreSQL</option>
        <option value="tcp.mssql">Microsoft SQL Server</option>
      </optgroup>
    </select>
  </div>
</div>


<div class="wizard-card" data-onload="" data-cardname="location">
  <h3>Monitoring Location</h3>

  <div class="wizard-input-section">
    <p>
      We determined <strong>Chicago</strong> to be
      the closest location to monitor
      <strong class="create-server-name"></strong>
      If you would like to change this, or you think this is
      incorrect, please select a different
      monitoring location.
    </p>

    <select data-placeholder="Monitor nodes" style="width:350px;" >
      <option value=""></option>
      <optgroup label="North America">
        <option>Atlanta</option>
        <option selected>Chicago</option>
        <option>Dallas</option>
        <option>Denver</option>
        <option>Fremont, CA</option>
        <option>Los Angeles</option>
        <option>Miami</option>
        <option>Newark, NJ</option>
        <option>Phoenix</option>
        <option>Seattle</option>
        <option>Washington, DC</option>
      </optgroup>

      <optgroup label="Europe">
        <option>Amsterdam, NL</option>
        <option>Berlin</option>
        <option>London</option>
        <option>Milan, Italy</option>
        <option>Nurnberg, Germany</option>
        <option>Paris</option>
        <option>Stockholm</option>
        <option>Vienna</option>
      </optgroup>

      <optgroup label="Asia/Africa">
        <option>Cairo</option>
        <option>Jakarta</option>
        <option>Johannesburg</option>
        <option>Hong Kong</option>
        <option>Singapore</option>
        <option>Sydney</option>
        <option>Tokyo</option>
      </optgroup>

    </select>

  </div>
</div>

<div class="wizard-card">
  <h3>Notification Schedule</h3>

  <div class="wizard-input-section">
    <p>
      Select the notification schedule to be used for outages.
    </p>

    <select class="wizard-ns-select" data-placeholder="Notification schedule" style="width:350px;">
      <option value=""></option>
      <option>ALIS Production</option>
      <option>ALIS Development &amp; Staging</option>
      <option>Panopta Development &amp; Staging</option>
      <option>Jira</option>
      <option>QSC Enterprise Production</option>
      <option>QSC Enterprise Development &amp; Staging</option>
      <option>Panopta Production</option>
      <option>Panopta Monitoring Nodes</option>
      <option>Common</option>
    </select>
  </div>

  <div class="wizard-ns-detail hide">
    Also using <strong>ALIS Production</strong>:

    <ul id="wizard-ns-detail-servers">
      <li><i class="icon-folder-close-alt"></i> Corporate sites</li>
      <li><i class="icon-folder-close-alt"></i> dt01.sat.medtelligent.com</li>
      <li><i class="icon-desktop"></i> alisonline.com</li>
      <li><i class="icon-desktop"></i> circa-db04.sat.medtelligent.com</li>
      <li><i class="icon-desktop"></i> circa-services01.sat.medtelligent.com</li>
      <li><i class="icon-desktop"></i> circa-web01.sat.medtelligent.com</li>
      <li><i class="icon-desktop"></i> heartbeat.alisonline.com</li>
      <li><i class="icon-desktop"></i> medtelligent.com</li>
      <li><i class="icon-desktop"></i> dt02.fre.medtelligent.com</li>
      <li><i class="icon-desktop"></i> dev03.lin.medtelligent.com</li>
    </ul>
  </div>
</div>


<div class="wizard-card">
  <h3>Agent Setup</h3>

  <div class="wizard-input-section">
    <p>The <a href="#">Panopta Agent</a> allows
      you to monitor local resources (disk usage, cpu usage, etc).
      If you would like to set that up now, please download
      and follow the <a href="#">install instructions.</a>
    </p>


    <div class="btn-group">
      <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
        Download
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">.rpm</a></li>
        <li><a href="#">.deb</a></li>
        <li><a href="#">.tar.gz</a></li>
      </ul>
    </div>

  </div>


  <div class="wizard-input-section">
    <p>You will be given a server key after you install the Agent
      on <strong class="create-server-name"></strong>.
      If you know your server key now, please enter it
      below.</p>

    <div class="control-group">
      <input type="text" class="create-server-agent-key"
             placeholder="Server key (optional)" data-validate="" />
    </div>
  </div>
</div>



<div class="wizard-error">
  <div class="alert alert-error">
    <strong>There was a problem</strong> with your submission.
    Please correct the errors and re-submit.
  </div>
</div>

<div class="wizard-failure">
  <div class="alert alert-error">
    <strong>There was a problem</strong> submitting the form.
    Please try again in a minute.
  </div>
</div>

<div class="wizard-success">
  <div class="alert alert-success">
    <span class="create-server-name"></span>
    was created <strong>successfully.</strong>
  </div>

  <a class="btn btn-default create-another-server">Create another server</a>
  <span style="padding:0 10px">or</span>
  <a class="btn btn-default im-done">Done</a>
</div>

</div>